<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
	/* 样式定义 */
	ul.pagination {
	    display: inline-block; /* 将内容显示为行内块元素 */
	    padding: 0; /* 清除内部填充 */
	    margin: 0; /* 清除外部边距 */
	}
	
	ul.pagination li {display: inline;} /* 将列表项显示为行内元素 */
	
	ul.pagination li a {
	    color: black; /* 链接文本颜色为黑色 */
	    float: left; /* 链接向左浮动 */
	    padding: 8px 16px; /* 链接内填充 */
	    text-decoration: none; /* 清除下划线 */
	    border-radius: 5px; /* 给链接添加圆角边框 */
		border: 1px solid #ddd;  /* 添加边框*/
		transition: background-color .3s; /*添加动画过渡给背景色延时0.3s改变*/
		margin: 0 4px; /* 0 分页间隔*/
	}
	
	/* 激活状态样式定义 */
	ul.pagination li a.active {
	    background-color: #4CAF50; /* 背景颜色为绿色 */
	    color: white; /* 文本颜色为白色 */
	    border-radius: 5px; /* 给链接添加圆角边框 */
	}
	
	/* 鼠标悬停状态样式定义 */
	ul.pagination li a:hover:not(.active) {background-color: #ddd;} /* 背景颜色为灰色 */
	</style>
	<body>
		
		<ul class="pagination">
		  <li><a href="#">«</a></li>
		  <li><a href="#">1</a></li>
		  <li><a class="active" href="#">2</a></li>
		  <li><a href="#">3</a></li>
		  <li><a href="#">4</a></li>
		  <li><a href="#">5</a></li>
		  <li><a href="#">6</a></li>
		  <li><a href="#">7</a></li>
		  <li><a href="#">»</a></li>
		</ul>
		
		
	</body>
</html>